<template>
  <div id="earning_list">
    <c-title :hide="false" :text="'领取收益'">
    </c-title>
    <div class="earning-list" v-if="earningList.length > 0">
      <div class="earning-item flex-a-c flex-j-sb"  v-for="(item,i) in earningList" :key='i'>
        <div class="earning-wrap">
          <h3 v-if="plugin_type == 'weeklyRewards'">分红ID{{ item.id }}</h3>
          <h3 v-else>订单号：{{item.order_sn}}</h3>
          <p>{{$i18n.t('money')}}{{item.amount}}</p>
        </div>
        <div class="earning-btn"  @click="getAdvertising(item.id)">领取</div>
      </div>
    </div>
    <van-empty description="加载中"  v-else-if="!isLoadMore && earningList.length == 0"/>
    <van-empty description="暂无数据"  v-else/>
    <!--领取弹窗-->
    <van-popup v-model="show1" position="center" style="height: 100%; width: 100%;"  overlay>
      <div class="flex-a-c flex-j-c earning-content" style="height: 100%; width: 100%;">
        <img class="adv_img"
          :src="adv_thumb"
          alt="图片" v-if="adv_thumb">
        <div class="succees-main" :style="{borderRadius: '25px',width:'70%',backgroundImage:`url(${earningPop})` }">
          <div class="success-title">已成功领取{{plugin_text}}</div>
          <div class="success-price"><span>{{$i18n.t('money')}}</span>{{income}}</div>
          <div class="succees-btn" @click.stop="toAdvertising">我知道了</div>
          <div class="success-explain">已存入{{reward_type?reward_type:income_name_text}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import earning_list_controller from "./earning_list_controller";

export default earning_list_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  ::v-deep .van-popup  {
    background: transparent;
  }
  #earning_list {
    .earning-list {
      margin: 0.625rem 0.75rem 0 0.75rem;
      .earning-item {
        background: #FFFFFF;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        padding:0.625rem 0.625rem 0.5625rem 0.625rem;
        margin:0 0 0.625rem 0;
        h3,p {
          text-align: left;
        }
        h3 {
          font-weight: 500;
          font-size: 0.8125rem;
          color: #00001C;
        }
        p {
          font-weight: 500;
          font-size: 0.875rem;
          color: #F15353;
          padding:0.125rem 0 0 0;
        }
        .earning-btn {
          font-weight: 400;
          font-size: 0.8125rem;
          line-height: 0.8125rem;
          color: #FFFFFF;
          background: #F15353;
          border-radius: 1rem 1rem 1rem 1rem;
          padding:0.5rem 0.9375rem;
        }
      }
    }
    .earning-content {
      position: relative;
      .adv_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }
    
    .succees-main {
      padding:0 0 1.375rem 0;
      background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/packet.png') no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      position: relative;
      z-index: 1;
      .success-title {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #A50D07;
        padding:6.875rem 0 0.4375rem 0;
      }
      .success-price {
        font-weight: bold;
        font-size: 1.75rem;
        line-height:1.75rem;
        color: #A50D07;
        span {
          font-size: 0.9375rem;

        }
      }
      .succees-btn {
        background: linear-gradient( 178deg, #FF9F65 0%, #FB3838 100%);
        border-radius: 1.375rem 1.375rem 1.375rem 1.375rem;
        margin:1.125rem 0 0.5rem 0;
        padding:0.8125rem 2.375rem;
        display: inline-block;
        font-weight: 500;
        font-size: 0.9375rem;
        color: #FFFFFF;
        line-height: 0.9375rem;
      }
      .success-explain {
        font-weight: 400;
        font-size: 0.6875rem;
        color: #6E6E79;
      }
    }
  }
 
</style>
